<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标事件</title>
	<style>
		.box {
			width: 520px;
			height: 280px;
			background-image: url("5mouse.jpg");
			position: relative;
		}
		.arrow {
			width: 520px;
			position: absolute;
			top: 120px;
			overflow: hidden;
			display: none;
		}
		.arrow img:first-child {
			margin-left: -14px;
		}
		.arrow img:last-child {
			float: right;
			margin-right: -14px;
		}
	</style>	
</head>
<body>
	<div class="box">
		<div class="arrow">
			<img src="arrow-left.png" alt="">
			<img src="arrow-right.png" alt="">
		</div>
	</div>	
	<script>
		var box=document.querySelector('.box');
		var arrow=document.querySelector('.arrow');
		box.onmouseover=function () {
			arrow.style='display:block';
		}
		box.onmouseout=function(){
			arrow.style='display:none';
		}
		// diplay:block;
		// diplay:none;
	</script>
</body>
</html>